<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span>用户名：</span>
        <input type="text" v-model.lazy='uname'>
        <span>{{tip}}</span>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../node_modules/vue-axios/dist/vue-axios.min.js"></script>
    
    <script>
        /* 
        1、采用侦听器监听用户名变化
        2、调用后台接口进行验证
        3、根据验证结果调整提示信息        
        */
     

        
        var vm = new Vue({
            el:'#app',
            data:{
                uname:'',
                tip:''
            },
            methods: {
                checkName:function(uname){
                    // 调用接口.可以使用定时任务模拟接口调用
                    	axios.get(`http://localhost/checkAdmin?uname=${this.uname}`).then(result => {
                            this.tip = result.data;
                    })
                }
            },
            // 计算属性可以防止监听属性的滥用，但一些异步请求，计算属性做不到，还得watch来完成。
            watch:{
                uname:function(val){
                    // 调用后台接口认证用户名的合法性
                    this.checkName(val);
                }
            }
        })
    </script>
</body>
</html>